<template>
	<view class="me-select-item-wrap-box">
		<view class="me-select-item-wrap" v-for="(item, index) in data__list" :key="index">
			<view class="me-select-item-left" :class="{'scan': editModel}">
				<view @tap="itemTap(item, index)">
					<slot :slot-scope="{item: item, index:index}"></slot>
				</view>
				<image @tap="tap(index, false)" :class="{'up': editModel}" v-show="editModel && item.select" class="select-icon"
				 src="../../static/unselect.png" mode=""></image>
				<image @tap="tap(index, true)" :class="{'up': editModel}" v-show="editModel && !item.select" class="select-icon"
				 src="../../static/select.png" mode=""></image>
			</view>
		</view>
		<view class="bot-fixed-wrap" v-if="editModel && data__list.length > 0">
			<u-button v-if="selectArr.length < data__list.length" class="but" @tap="selectAll" type="primary" shape="circle">全选</u-button>
			<u-button v-else class="but" @tap="unSelectAll" type="primary" shape="circle">取消全选</u-button>
			<u-button @tap="finish('read')" class="but" type="success" shape="circle">{{selectArr.length > 0 ? `已读(${selectArr.length})` : '已读'}}</u-button>
			<u-button @tap="finish('delete')" class="but" type="error" shape="circle">{{selectArr.length > 0 ? `删除(${selectArr.length})` : '删除'}}</u-button>
			<!-- <view v-if="selectArr.length < data__list.length" class="but" @tap="selectAll">全选</view> -->
			<!-- <view v-else class="but" @tap="unSelectAll">取消全选</view> -->
			<!-- <view @tap="finish" class="but" :class="{'danger': selectArr.length > 0, 'un':selectArr.length<=0 }">{{selectArr.length > 0 ? `删除(${selectArr.length})` : '删除'}}</view> -->
		</view>
	</view>
</template>

<script>
	import dualSelect from '@/components/dual-select/dual-select.vue'
	export default {
		components: {
			dualSelect
		},
		data() {
			return {
				data__list: [],
				editModel: false,
				selectNum: 0,
				selectArr: [],
			}
		},
		props: {
			datalist: {
				type: Array,
				require: true
			},
			options: {
				type: Object,
				require: true
			},
		},
		watch: {
			datalist: {
				handler(n, o) {
					this.data__list = n
				},
				deep: true
			},
			data__list: {
				handler(n, o) {
					var selectNum = 0
					var tem = []
					if (this.data__list.length > 0) {
						this.data__list.forEach((item, index) => {
							item.select && selectNum++
							if (this.options.flags.length <= 0) {
								// 没有特别指定要记录的量，则保存整个
								item.select && tem.push(item)
							} else {
								// flag指定了要记录的量
								var tItem = {}
								var Arr = []
								this.options.flags.forEach((item2) => {
									tItem[item2] = item[item2]
								})
								// tItem['index'] = index
								item.select && tem.push(tItem)
							}
							
						})
					}
					this.selectArr = tem
					this.selectNum = selectNum
					this.$emit('change', this.selectArr)
				},
				deep: true
			}
		},
		created() {
			this.data__list = this.datalist
		},
		methods: {
			itemTap(item, index) {
				// if (this.options.itemCanSelect && this.editModel) {
				if ( this.editModel) {
					// select 变量用于保存是否被选中
					this.data__list[index].select = !this.data__list[index].select
				}
				if (!this.editModel) {
					this.$emit('itemClick', item)
				}
			},
			changeModel() {
				this.editModel = !this.editModel
			},
			getSelectAll() {
				return this.selectArr
			},
			selectAll() {
				this.data__list.forEach((item, index) => {
					item.select = true
				})
			},
			unSelectAll() {
				this.data__list.forEach((item, index) => {
					item.select = false
				})
			},
			tap(index, value) {
				this.data__list[index].select = value
			},
			finish(type) {
				if (this.selectArr.length <= 0) return
				this.$emit('finish', this.selectArr,type)
			}
		}

	}
</script>

<style scoped>
	.me-select-item-wrap-box {
		padding: 0upx;
		box-sizing: border-box;
	}

	.me-select-item-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin: 15upx 0;
	}


	.me-select-item-left {
		min-height: 40upx;
		width: 100%;
		transition: width .1s linear;
	}

	.me-select-item-left .select-icon {
		height: 40upx;
		width: 40upx;
	}

	.me-select-item-left.scan {
		width: 90%;
	}

	.me-select-item-left .select-icon {
		position: absolute;
		left: 40upx;
		top: 50%;
		transform: translateY(-50%);
		z-index: -1;


	}

	.me-select-item-left .select-icon.up {
		z-index: 1;
	}

	.bot-fixed-wrap {
		position: fixed;
		background-color: #FFFFFF;
		display: flex;
		bottom: 0;
		left: 0;
		/* border-top: 1upx solid red; */
		width: 100%;
		height: 100upx;
		z-index: 99;
	}

	.but {
		line-height: 100upx;
		text-align: center;
		height: 100upx;
		width: 25%;
	}
</style>
